<template>
<v-container class="containers">
        <client-only>
        <waterfall 
          :list="emojis" 
          :gutter="10" 
          :width="240" 
          :breakpoints="{
            1200: { //当屏幕宽度小于等于1200
              rowPerView: 4,
            },
            800: { //当屏幕宽度小于等于800
              rowPerView: 3,
            },
            500: { //当屏幕宽度小于等于500
              rowPerView: 2,
            }
          }"
          ref="waterfall"
          backgroundColor="rgba(0, 0, 0,0)"
          >
          <template slot="item" slot-scope="props">
            <v-card data-trigger5>
              <my-img class="emoji_img" :useTrigger="false" :src="props.data.src" alt="" :index="props.data.index" @load="$refs.waterfall.refresh()"/>
            </v-card>
          </template>
        </waterfall>
        </client-only>
    <div class="images" v-show="showImage" v-viewer="{movable: true}">
      <img v-show="false" v-for="item in emojis" :src="item.src" :key="item.index">
    </div>
  </v-container>
</template>
<script>
const config = require("~/config.json");
import MyImg from "~/components/MyImg";
import Bus from '~/pages/util'
export default {
  data() {
    return {
      emojis: [],
      emoji_url: "api/image/emoji",
      base_url: config.base_url,
      gridWidth:-1,
    };
  },
  created() {
    Bus.$on('showImage',this.showImage)
    this.$axios.get(this.emoji_url).then(res => {
      this.emojis = [];
      this.current_page_emojis = [];
      let index=0;
      if (res.data.success) {
        let raw_path = res.data.other.result;
        raw_path.map(p => {
          this.emojis.push({src:this.base_url + p,index:index++});
        });
      }
    });
  },
  mounted() {
    this.$nextTick(()=>{
      this.gridWidth = document.getElementsByClassName("containers")[0].clientWidth;
    })
  },
  methods: {
    showImage(index){
        const viewer = this.$el.querySelector('.images').$viewer
        if(viewer){
          viewer.index = index
          viewer.show()
        }
    },
  },
  components:{
    MyImg
  },
  computed: {
    ismobile() {
      return this.$store.getters.getIsMobile;
    }
  }
};
</script>
<style lang="less">
.emoji_img:hover {
  cursor: pointer;
}
.emoji_img:hover .v-image__image--contain {
  transform: scale(1.2) rotate(5deg);
  transition-duration: 0.3s;
}
</style>
